<script setup>
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { Form, message } from "ant-design-vue";

import axios from "axios";
import { toArray } from "lodash-es";

// 获取父组件传递的参数
const props = defineProps( {
  id : {// 活动id
    type : [ String, Number ],
    default : 0,
  },
  loading : {// 是否加载中
    type : Boolean,
    default : false,
  }
} );

// 暴露事件
const emit = defineEmits( [
  'submit'
] );

// 定义只读配置项
const prodConfig = readonly( {
  step : 10,
  min : 10,
} );

//表单初始化
const formRef = ref();
const formState = reactive( {
  activity_name : '活动名称',
  resource : '1',
  activity_type : [ '1' ],
  desc : '描述',
  prod_num : 10,
  email : '841899983@qq.com',
} );
//表单数据验证规则
const ruleRef = reactive( {
  activity_name : [ {
    required : true,
    message : 'Please input activity name',
    trigger : 'change'
  }, {
    type : 'string',
    min : 3,//文本的最小长度
    max : 20,//文本最大长度
    message : `Please input at least 5 - 20 characters`,
    trigger : 'blur'
  } ],
  prod_num : [ {
    required : true,
    message : 'Please input product number',
    trigger : 'blur'
  }, {
    min : prodConfig.min,
    type : 'number',
    message : `Please input at least ${ prodConfig.min }`,
    trigger : 'blur'
  } ],
  activity_type : [ {
    required : true,
    trigger : 'change'
  }, {
    type : 'array',
    min : 1,
    max : 3,
    trigger : 'change',
    fields : {
      0 : {
        required : true,
        message : '第一个选项必选',
        trigger : 'change'
      },
    },
  } ],
  resource : [ {
    type : 'enum',
    enum : [ '1', '2' ],//枚举类型的值
    required : true,
    message : 'Please select resource',
    trigger : 'change'
  } ],
  email : [ {
    required : true,
    message : 'Please input correct email',
    trigger : 'blur'
  }, {
    type : 'email',
    message : 'Please input correct email',
    trigger : 'change'
  } ],
  desc : [ {
    required : true,
    message : 'Please input activity form',
    trigger : 'blur'
  } ],
} );
const useForm = Form.useForm;
const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm( formState, ruleRef );
// 提交表单
const onSubmit = () => {
  validate().then( () => {
    //需要将 formState 转为普通对象
    emit( 'submit', toRaw( formState ) );
  } ).catch( ( error ) => {
    console.log( errorInfos.value );
  } );
};

// 收集验证的错误信息
const errorInfos = computed( () => {
  return mergeValidateInfo( toArray( validateInfos ) );
} );

// 减少数量
const minusHandler = () => {
  if ( formState.prod_num <= prodConfig.min ) {
    formState.prod_num = prodConfig.step;
  } else {
    formState.prod_num -= prodConfig.step;
  }
};
// 增加数量
const plusHandle = () => {
  formState.prod_num += prodConfig.step;
}

// 数据获取方法
const fetchData = async ( id ) => {
  if ( !id ) {
    message.error( 'id 不能为空' );
  }
  try {
    const res = await axios.get( `/api/tags-info?id=${ id }` );
    if ( res.data.code === 200 ) {
      formState.activity_name = res.data.data.activity_name;
      formState.resource = res.data.data.resource;
      formState.desc = res.data.data.desc;
      formState.prod_num = res.data.data.prod_num;
    } else {
      message.error( res.data.msg );
    }
  } catch ( error ) {
    console.error( '获取数据失败:', error );
  }
};

// 监听 id 变化
watch(
    () => props.id,
    ( newId ) => {
      if ( newId ) {
        fetchData( newId );
      } else {
        resetFields();
      }
    },
    { immediate : true}// 初始化时立即执行
);

const reset = () => {
  resetFields();
};
// 暴露重置表单方法
defineExpose( {
  reset,
} )

</script>

<template>
  <a-form ref="formRef" :model="formState" :rules="ruleRef" :label-col="{span: 4,}" :wrapper-col="{span: 15,}" @submit="onSubmit">
    <a-form-item label="Activity name" name="activity_name">
      <a-input v-model:value="formState.activity_name"/>
    </a-form-item>
    <a-form-item label="Product number" name="prod_num">
      <a-input-number v-model:value="formState.prod_num">
        <template #addonBefore>
          <span @click="minusHandler"><MinusOutlined/></span>
        </template>
        <template #addonAfter>
          <span @click="plusHandle"><PlusOutlined/></span>
        </template>
      </a-input-number>
    </a-form-item>
    <a-form-item label="Activity type" name="activity_type">
      <a-checkbox-group v-model:value="formState.activity_type">
        <a-checkbox value="1" name="activity_type" disabled>Online</a-checkbox>
        <a-checkbox value="2" name="activity_type">Promotion</a-checkbox>
        <a-checkbox value="3" name="activity_type">Offline</a-checkbox>
      </a-checkbox-group>
    </a-form-item>
    <a-form-item label="Resources" name="resource">
      <a-radio-group v-model:value="formState.resource">
        <a-radio value="1">Sponsor</a-radio>
        <a-radio value="2">Venue</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Email" name="email">
      <a-input v-model:value="formState.email"/>
    </a-form-item>
    <a-form-item label="Activity form" name="desc">
      <a-textarea v-model:value="formState.desc"/>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" html-type="submit" :loading="props.loading">提交</a-button>
      <a-button style="margin-left: 10px" @click="reset">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<style scoped>
.ant-input-number-group-wrapper:deep(.ant-input-number-handler-wrap) {
  display: none !important;
}

.ant-input-number-group-wrapper:deep(.ant-input-number-group-addon) {
  cursor: pointer;
}
</style>